<template>
  <div class="purchase-root">
    <el-card shadow="never" body-style="padding: 20px 20px 0px 20px;">
      <el-form
        ref="form"
        :rules="$rules.purchaseOrderRules"
        inline
        :model="form"
        class="form-options"
        label-width="100px"
      >
        <el-form-item label="收货单号" prop="receiveNo">
          <el-input placeholder="收货单号" v-model="form.receiveNo" disabled />
        </el-form-item>
        <el-form-item label="收货完成时间" prop="receiveTime">
          <el-input
            placeholder="收货完成时间"
            v-model="form.receiveTime"
            disabled
          />
        </el-form-item>
        <el-form-item label="收货人" prop="receiverName">
          <el-input placeholder="收货人" v-model="form.receiverName" disabled />
        </el-form-item>
        <el-form-item label="订单创建时间" prop="createTime">
          <el-input
            placeholder="订单创建时间"
            v-model="form.createTime"
            disabled
          />
        </el-form-item>
        <!--supplierId: '',-->
        <!--supplierName: '',-->
        <!--fishpondId-->
        <el-form-item label="鱼塘" prop="fishpondName">
          <el-select
            v-model="form.fishpondName"
            clearable
            filterable
            placeholder="请选择鱼塘"
            :disabled="type == 0"
            @change="handleSelectPond"
          >
            <el-option
              v-for="item in fishpondOptions"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="鱼品种类" prop="fishSpeciesId">
          <el-select
            v-model="form.fishSpeciesId"
            clearable
            filterable
            placeholder="请选择鱼品种类"
            :disabled="type == 0"
            @change="handleSelectType"
          >
            <el-option
              v-for="item in fishSpeciesOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="送货人" prop="deliveryman">
          <el-input
            placeholder="请输入送货人"
            v-model="form.deliveryman"
            :disabled="type == 0"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="送货人电话" prop="deliverymanPhone">
          <el-input
            placeholder="请输入送货人电话"
            v-model="form.deliverymanPhone"
            :disabled="type == 0"
          />
        </el-form-item>
        <el-form-item label="送货重量" prop="sendWeight">
          <el-input
            placeholder="送货重量"
            v-model="form.sendWeight"
            type="number"
            min="0"
            :disabled="type == 0"
          >
            <template slot="append">kg</template>
          </el-input>
        </el-form-item>
        <el-form-item label="合格重量" prop="goodWeight">
          <el-input
            placeholder="合格重量"
            v-model="form.goodWeight"
            type="number"
            min="0"
            :disabled="type == 0"
          >
            <template slot="append">kg</template>
          </el-input>
        </el-form-item>
        <el-form-item label="合格率" prop="goodRate">
          <el-input
            placeholder="合格率"
            v-model="form.goodRate"
            type="number"
            disabled
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="收货备注" class="long-content">
          <el-input
            type="textarea"
            :rows="3"
            :disabled="type == 0"
            placeholder="请输入备注"
            v-model="form.receiveRemark"
            maxlength="120"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Equipment from "../Equipment";
import {
  getUserCondition,
  querySearchFishpondName,
  querySearchFishType,
} from "@/api/common";
import { addPurchaseOrder, updatePurchaseOrder } from "@/api/purchase";
import {
  addWarehouseEx,
  getBaseEquipmentType,
  getCustomer,
  updateWarehouseEx,
} from "@/api/warehouse";
import { setTreeDisable } from "@/utils/public";
import { getName } from "@/utils/auth";

export default {
  name: "Purchase",
  components: {
    Equipment,
  },
  props: {
    // 0:只读 1：修改  2：新增
    type: {
      type: Number,
      default: 0,
    },
    isOnlyRead: {
      type: Boolean,
      default: false,
    },
    // 1则为采购单管理，0为入库单管理
    mark: {
      type: Number,
      default: 1,
    },
    form: {
      type: Object,
      default: function () {
        return {
          id: "",
          receiveNo: "",
          receiveTime: "",
          supplierId: "",
          supplierName: "",
          fishpondName: "",
          fishpondId: "",
          fishSpecies: "",
          sendWeight: "",
          goodWeight: "",
          goodRate: "",
          receiverName: "",
          deliveryman: "",
          deliverymanPhone: "",
          receiveRemark: "",
          createTime: "",
        };
      },
    },
  },
  data() {
    return {
      fishpondOptions: [],
      fishSpeciesOptions: [], //TODO lihuaibei 后台返回，确保系统一致，好修改
    };
  },
  mounted() {
    querySearchFishpondName({}).then((res) => {
      this.fishpondOptions = res.resultData;
    });
    querySearchFishType({ remark: 0 }).then((res) => {
      this.fishSpeciesOptions = res.resultData;
    });
    this.querySearchPurchaser(this.form.purchaseName);
  },
  methods: {
    handleSelectPond() {
      const item = this.fishpondOptions.find(
        (item1) => item1.name === this.form.fishpondName
      );
      this.form.fishpondId = item.id;
    },
    handleSelectType() {
      const item = this.fishSpeciesOptions.find(
        (item1) => item1.id === this.form.fishSpeciesId
      );
      this.form.fishSpecies = item.name;
    },
    save() {
      console.log("save");
      this.$refs["form"].validate((valid) => {
        console.log("save2");
        if (valid) {
          console.log("save3");
          const param = { orderStatus: 0 };
          Object.assign(param, this.form);
          param.orderStatus = 0;
          if (this.type == 2) {
            //新增
            addPurchaseOrder(param).then((response) => {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.$emit("onSave", {});
            });
          } else if (this.type == 1) {
            // 更新
            updatePurchaseOrder(param).then((response) => {
              this.$message({
                message: "更新成功",
                type: "success",
              });
              this.$emit("onSave", {});
            });
          }
        } else {
          return false;
        }
      });
    },

    /**
     * 模糊查询采购人
     * @param queryString
     * @param cb
     */
    querySearchPurchaser: function (queryString) {
      // 调用 queryString 返回建议列表的数据
      // 使用动态 el-option 来加载
      this.purchaserLoading = true;
      getUserCondition({ userName: queryString, page: 1, rows: 20 }).then(
        (res) => {
          this.purchaserLoading = false;
          this.purchaserOptions = res.resultData;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.purchase-root {
  max-height: 680px;
  overflow-y: auto;

  ::v-deep .el-form-item__content {
    width: 185px !important;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
  }

  ::v-deep .long-content {
    .el-form-item__content {
      width: 480px !important;

      .el-date-editor--datetimerange.el-input,
      .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
      }

      .el-date-editor--daterange.el-input,
      .el-date-editor--daterange.el-input__inner,
      .el-date-editor--timerange.el-input,
      .el-date-editor--timerange.el-input__inner {
        width: 100%;
      }

      .el-cascader--small {
        width: 100%;
      }
    }
  }
}
</style>
